<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      body {
          background: #fff;
      }
      .livebroadcast-header {
        padding:0.22rem 0.32rem 0.26rem;  
        font-family: PingFangSC-Medium;
        font-size: 0.32rem;
        color: #222222;
        letter-spacing: 0;
        text-align: center;
        /* position: relative; */
        background-color: #fff;
        position: fixed;
        z-index: 1;
        width: 100%;
      }
      .livebroadcast-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .livebroadcast-list {
        padding-top: 1.02rem;
      }
      .livebroadcast-list ul {
          list-style: none;
          padding: 0;
          margin: 0;
          padding: 0 0.32rem;
          background: f9f9f9;
      }
      .livebroadcast-list ul li {
        background: #FFFFFF;
        border-bottom: 0.02rem solid #f7f7f7;
        padding-top: 0.3rem;
        padding-bottom: 0.36rem;
      }
      .livebroadcast-list ul li:last-child{
          border-bottom: none;
      }
      .list-top {
        position: relative;
        width: 100%;
        height: 0.48rem;
        margin-bottom: 0.3rem;
      }
      .top-left{
        position: absolute;
        left: 0;
        top: 0.04rem;        
        border-radius: 0.2rem;
        background-color: #EDF2FF;
        padding: 0.08rem 0.12rem;
        line-height: 0.24rem;
        font-size: 0.24rem;    
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2C68FF;
      }
      .top-left img {
        width: 0.24rem;
        height: 0.24rem;
        vertical-align: middle;
      }
      .top-left span {
          display: inline-block;
          line-height: 0.24rem;
          vertical-align: middle;
      }
      .top-right {
        position: absolute;
        right: 0;
        top: 0;
        height: 0.48rem;
        line-height: 0.48rem;
        text-align: center;
        width: 1.08rem; 
        background: #F7F7F7;
        border-radius: 0.26rem;
        color: #FCB05E;
      }
      .list-bottom {
        
      }
      .bottom-left {
          display: inline-block;
          vertical-align: top;
          width: 3.1rem;
          height: 1.94rem;
          background-color: pink;
          position: relative;
          margin-right: 0.2rem;     
      }
      .bottom-left img {
        width: 3.1rem;
        height: 1.94rem;
      }
      .statusimg {
          position: absolute;
          top: 0;
          left: 0;
          /* width: 1rem; */
          height: 0.36rem;
          background-color: #F27D76;
          color: #fff;        
          border-radius: 0 0px 0.08rem 0px;
          padding-left: 0.08rem;
          padding-right: 0.08rem;
      }
      .statusimg img {
          width: 0.2rem;
          height: 0.2rem;
          margin-right: 0.08rem;
          vertical-align: middle;
      }
      .statusimg span {   
        display: inline-block;
        font-size: 0.2rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
      .bottom-right {
          display: inline-block;
          vertical-align: top;
      }
      .bottom-right-text {   
        width: 3.36rem;  
        height: 1.32rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 0.44rem;
        text-overflow: -o-ellipsis-lastline;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 3;  
        -webkit-box-orient: vertical; 
        margin-bottom: 0.24rem;
      }
      .bottom-right-explain {
        width: 3.28rem;
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.28rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.7);
        text-overflow: -o-ellipsis-lastline;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 1;  
        -webkit-box-orient: vertical; 
      }
      .bottom-right-explain .explain-name {
        display: inline-block;
        margin-right: 0.1rem;
      }
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->

  <!-- 头部 -->
  <div class="livebroadcast-header">
    <img src="../../images/allPic/jiantou.png" alt="" onclick='closeWindow()'>
    更多直播
  </div>

  <!-- 视频列表 -->
  <div class="livebroadcast-list">
    <ul>
        <!-- <li>
           <div class="list-top">
               <div class="top-left">
                <img src="../../images/allPic/zhiboshijian.png" alt="">
                <span>12月11日 17：30</span>
               </div>
               <div class="top-right">
                   <span>进入</span>
               </div>
           </div>
           <div class="list-bottom">
               <div class="bottom-left">
                   <div class="statusimg">
                       <img src="../../images/allPic/zhibodonghua.png" alt=""><span>直播中</span>
                   </div>
                   <img src="" alt="">
               </div>
               <div class="bottom-right">
                    <div class="bottom-right-text">
                        2020京东全球科技探索者大会 资管科技平台分论坛
                    </div>
                    <div class="bottom-right-explain">
                        <span class="explain-name">
                            吃光生
                        </span>
                            安信证券首席固aaaaaaaaa
                    </div>
               </div>
           </div>
        </li> -->
    </ul>
  </div>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let searchWord
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    $('.livebroadcast-list ul').empty()
    getList({'pageNum':pageNum})
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    // $('.videosearch-list ul').empty()
    // pageNum = 1
    // getList({'pageNum':pageNum})
  }
  //获取列表
  function getList(params){
    Server.getVideoList.getlivebroadcastList({'isRecommend':'','TrainingType':'1','pageSize':10,'pageNum':params.pageNum||pageNum}).then(res => {
      console.log(res)
      if(res.code === 0){
        let list = res.data.result.list
        if(list.length !== 0){
          //改变时间
          list.map((item,index) => {
            let creatTime = item.trainStartDttm*1000             
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
            let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 0){
                item.isnowlive = 1
                item.trainStartDttm = month +'月'+day+'日' + hour +':'+minute
            }else if(nowTime - creatTime < 30*60*1000 && nowTime - creatTime > 0){
              if(nowTime - creatTime < 1*60*1000){
                item.trainStartDttm = '1分钟前'
              }else{
                item.trainStartDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
              }
            }else if(nowTime - creatTime < 24*60*60*1000){
                if(nowTime-creatTime < 60*60*1000){
                  item.trainStartDttm = '1小时前'
                }else {
                  item.trainStartDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                }
            }else if(new Date().getDate()-new Date(creatTime).getDate() ==1){
              item.trainStartDttm = '昨天'+hour+":"+minute
            }else{
              item.trainStartDttm = month +'月'+day+'日' + hour +':'+minute
            }
          })

          list.map((v,i) => {
                  let li = 
                        `<li onclick="govideoPlay({'infoId':'${v.infoId}','isnowlive':'${v.isnowlive?v.isnowlive:''}'})">
                        <div class="list-top">
                            <div class="top-left">
                                <img src="../../images/allPic/zhiboshijian.png" alt="">
                                <span>${v.trainStartDttm}</span>
                            </div>
                            <div class="top-right">
                                <span style="color:${v.isnowlive?'#81A3FB':'#FCB05E'}">${v.isnowlive?'未开始':'进入'}</span>
                            </div>
                        </div>
                        <div class="list-bottom">
                            <div class="bottom-left">
                                <div class="statusimg" style="display:${v.isnowlive?'none':'block'}">
                                    <img src="../../images/allPic/zhibodonghua.png" alt=""><span>直播中</span>
                                </div>
                                <img src="${v.coverImgUrl}" alt="">
                            </div>
                            <div class="bottom-right">
                                    <div class="bottom-right-text">
                                        ${v.mainTitle}
                                    </div>
                                    <div class="bottom-right-explain">
                                        <span class="explain-name">
                                            ${v.lecturer}
                                        </span>
                                            ${v.lecturerIntroduction}
                                    </div>
                            </div>
                        </div>
                        </li>`
                $('.livebroadcast-list ul').append(li)
                // $('.searchipt').val('')
          })
        }else{
        //   jsBridge.toast('暂无数据')
        }
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  //点击视频播放按钮
  function govideoPlay(params){
    // console.log(params)
    if(params.isnowlive === ''){
          jsBridge.openVideo({'infoId':params.infoId,'resourceType':'1'})      
    }else{
        return false
    }
    // jsBridge.openWindow('/html/video/videoplay.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.livebroadcast-list ul').offset().top      
    let height = $('.livebroadcast-list ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(top+height-maxHeight,'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
      pageNum++
      getList({'pageNum':pageNum})
    }
  })
  
</script>
</html>